<template>
    <div>
        <h1>isRef 和 isReactive</h1>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, isRef ,reactive,isReactive} from 'vue'

export default defineComponent({
    setup() {
        //isRef  用来判断 一个数据是否是ref对象，是返回true，不是则返回false。
        //isReactive 用来判断  一个数据是否是proxy对象，是则返回true，不是则返回 false
        //事实证明 isReactive 判断一个数据是不是proxy对象。
        //注意    ref(基本数据类型)时，他的value值是基本数据类型，  ref(引用数据类型时)，他的value的值是proxy对象。
        const refobj = ref({
            name: 'tom',
            age: 20
        })
        const reactiveObj = reactive({
            name:'tom',
            age:20
        })
        const arr = reactive([1,2,3])
        const arr1 = ref([1,2,3])
        const refobj1 = ref(0)
        console.log(refobj)//ref对象
        console.log(refobj.value)//Proxy{name: 'tom', age: 20}
        console.log(isRef(refobj))//true
        console.log(isRef(reactiveObj))//false
        console.log(isReactive(reactiveObj))//true
        console.log(isReactive(refobj))//false
        console.log(refobj.value)//Proxy{name: 'tom', age: 20}
        console.log(isReactive(refobj.value))//true  refobj.value是一个proxy对象
        console.log(refobj1.value)//0
        console.log(isReactive(refobj1.value))//false refobj1.value是一个数值 number
        console.log(arr)//Proxy{0: 1, 1: 2, 2: 3}
        console.log(isReactive(arr))//true
        console.log(arr1);//ref对象
        console.log(arr1.value)//Proxy{0: 1, 1: 2, 2: 3}
        console.log(isReactive(arr1))//false
        console.log(isReactive(arr1.value))//true

        return {
            refobj,
            reactiveObj
        }
    }
})
</script>

<style scoped>

</style>